<template>
  <div class="ChatListAction">
    <n-dropdown placement="bottom-start" trigger="click" size="medium" :options="options" @select="handleSelect">
      <c-button text iconName="MoreHorizFilled" />
    </n-dropdown>
  </div>
</template>

<script setup lang='tsx'>
const { chatMap, currentChat } = storeToRefs(chatStore())
const dialog = useDialog()
const props = defineProps<{
  id: string
}>()
const handleSelect = (key: string) => {
  // 处理点击事件 
  options.find(item => item.key === key)!.action()
}
const options = [{
  label: '删除',
  key: 'delete',
  action: () => {
    if (props.id === currentChat.value) {
      currentChat.value = 0
    }
    ObjectToArray<Message>(chatMap.value.get(props.id)!.messages)?.forEach(e => {
      e.controller?.abort?.()
    })
    chatMap.value.delete(props.id)
  }
}, {
  label: '重命名',
  key: 'rename',
  action: () => {
    const name = ref(chatMap.value.get(props.id)!.name)
    dialog.create({
      title: '修改名称',
      positiveText: '保存',
      negativeText: '取消',
      showIcon: false,
      onPositiveClick: () => {
        chatMap.value.get(props.id)!.name = name.value
      },
      content: () =>
        <n-input
          showCount
          class="updateMessageInput"
          onInput={(e: string) => { name.value = e }}
          value={name.value}
          placeholder="请输入对话名称"
          autosize={{
            minRows: 3,
            maxRows: 20
          }}
        />,
    })
  }
}]
</script>

<style lang="scss" scoped>
.ChatListAction {
  display: flex;
  align-items: center;
}
</style>